<template>
   <body id="poster">
    <el-form class="loginContainer"  label-position="left"  label-width="0px">
      <h3 class="login_title">
         <el-button @click="toRegister()" style="border: none;">注册</el-button>
          <span>水检测平台登录</span>
      </h3>
      <el-form-item label="" prop="username">
        <el-input type="text" v-model="loginForm.username" prefix-icon="el-icon-user" autocomplete="off"  placeholder="登录账号"></el-input>
      </el-form-item>
      <el-form-item label=" " prop="password">
        <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-user" autocomplete="off" placeholder="登录密码"></el-input>
      </el-form-item>
      <el-form-item style="width: 100%; text-align: center;">
        <el-button type="primary" @click="login()" style="width: 100%; text-align: center; background: #505458;border:none">立即登录</el-button>
   
      </el-form-item>
      <el-checkbox>我已同意隐私条款</el-checkbox>
     </el-form>
  </body>
</template>

<script>
import { UserLogin } from '@/api/user'
import { mapMutations , mapState  } from 'vuex';

export default {
    data(){
      return {
        loginForm: {
          username:'',
          password:''
        },
        rules: {
          username:[
            {required: true , message:"请输入用户名" , trigger:'blur'}
          ],
          password:[
            {required: true , message:"请输入密码" , trigger:'blur'}
          ],
        }
      }
    },
    created(){
      this.loginHandleClick = this.$debounce(this.login, 500);
    },
    methods:{
      ...mapMutations('user',['setToken']),
      async login(){
        const res = await UserLogin(this.loginForm)
        console.log(res)
        if(res.code === 200) {
          // this.setToken(res.data)
          await this.$store.commit('user/setToken', res.data)
          await this.$router.push('/')
        }
      },
      //注册按钮
      toRegister(){
        this.$router.push({path:'/Register'})
      }
    }
  }
</script>

<style scoped>
#poster{
       background-position:center;
       
       height: 100%;
       width: 100%;
       /* background-size: cover; */
       position: fixed;
   
       background-image: url('@/assets/img/bg.jpg');
       background-size:100% 100%;
       background-repeat:no-repeat;

     }
     body{
       margin: 0px;
       padding: 0px;
     }
     .loginContainer{
       border-radius: 15px;
       background-clip: padding-box;
     
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
      
       padding: 35px 35px 15px 35px;
       width: 350px;
       background: #fff;
       border: 1px solid #eaeaee;
      
       box-shadow: 0 0 25px #cac6c6;
     }
     .login_title{
      text-align: center;
      margin: 0px auto 30px auto;
      color: #505458;
     }
     

</style>